<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - 加载百度离线地图 - ol6</title>
    <script src='../lib/gcoord.js'></script>
    <script src='../lib/ol6.4.3/ol.js'></script>
    <link rel='stylesheet' href='../css/ol6.4.3/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projection = new ol.proj.Projection({
		code: 'BD:09',
		extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
		units: 'm',
		axisOrientation: 'neu',
		global: false
	});
	ol.proj.addProjection(projection);
	const extent = projection.getExtent();
	let resolutions = [];
	const maxZoom = 18;
	let matrixIds = [];
	// 计算百度使用的分辨率
	for (let i = 0; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
		matrixIds[i] = i;
	}
	// resolutions.push(0.5);
	resolutions = resolutions.slice(4, 12 + 1);
	matrixIds = matrixIds.slice(4, 12 + 1);
	console.log('===========resolutions', resolutions, matrixIds);
	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions,
		extent,
		matrixIds
	});
	const baiduSource = new ol.source.TileImage({
		projection,
		tileGrid: tileGrid,
		tileUrlFunction: (tileCoord, pixelRatio, proj) => {
			let [z, x, y] = tileCoord;
			// console.log(tileCoord);
			y = -y - 1;
			// return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
			// 百度瓦片服务url将负数使用M前缀来标识
			// return `http://192.168.130.167:8080/baidumaps/roadmap/${z}/${x}/${-y}.png`;
			return `http://192.168.108.95:8080/scgis/roadmap?level=${z}&col=${x}&row=${y}`;
			// return `http://192.168.130.167:8080/baidumaps/roadmap?level=${z}&col=${x}&row=${y}`;
			// return `http://192.168.106.246:10001/scgis/pic?level=${z}&col=${x}&row=${y}`;
		}
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource
	});
	// 120.151966, 30.244797
	// const centerPoint = [120.151966, 30.244797];
	// const centerPoint = [120.17284,30.269524];
	const centerPoint = [114.046298,30.764791];
	const circlePoint = gcoord.transform(centerPoint, gcoord.BD09, gcoord.BD09MC);
	console.log(circlePoint);

	const bdP = gcoord.transform([120.025155, 30.289265], gcoord.WGS84, gcoord.BD09);
	console.log(bdP);

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon(
			/** @type {olx.style.IconOptions} */ ({
				anchor: [10, 26],
				anchorXUnits: 'pixels',
				anchorYUnits: 'pixels',
				src: '../image/position_orange.png'
			})
		)
	});

	iconFeature.setStyle(iconStyle);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature]
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	const view = new ol.View({
		constrainResolution: true,
		center: circlePoint,
		projection,
		zoom: 6,
		// maxZoom: 9,
		// minZoom: 4,
		// maxResolution: 16384,
		// minResolution: 512,
		resolutions
	});

	// const minZoomOfResolution = view.getZoomForResolution(view.getMinResolution());
	// const maxZoomOfResolution = view.getZoomForResolution(view.getMaxResolution());
	// view.setMaxZoom(maxZoomOfResolution);
	// view.setMinZoom(minZoomOfResolution);
	// console.log('========view.getMinResolution()', view.getMinResolution());
	// console.log('========view.getMaxResolution()', view.getMaxResolution());
	// console.log('========min max ', minZoomOfResolution, maxZoomOfResolution);
	// console.log('===============view.getResolution()', view.getResolution());

	const map = new ol.Map({
		layers: [
			baiduMapLayer,
			iconLayer
		],
		target: 'map',
		view
	});

	console.log(view);
</script>
</html>
